<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>销售管理</title>
    <link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
    <script src="/webjars/vue/2.6.14/dist/vue.js"></script>
    <script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
    <script src="/webjars/axios/1.6.2/dist/axios.js"></script>
    <style>
        .you{
            text-align: right;
        }
    </style>
    <style>
        body{
            background-color: white;
        }
    </style>
</head>
<body>


<!--订单-->
<div id="ord">
    <template>
        <div>
            <el-form inline>
                <el-form-item label="订单单号:">
                    <el-input v-model="vo.orderNumber"></el-input>
                </el-form-item>
                <el-form-item label="销售名称:">
                    <el-input v-model="vo.saleName"></el-input>
                </el-form-item>
                <span class="demonstration">订单日期:</span>
                <el-date-picker v-model="dataD"
                                @change="dataTime"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-button type="primary" @click="search"  icon="el-icon-search">查询</el-button>
                <el-button plain icon="el-icon-printer" @click="exprort" circle></el-button>
            </el-form>
        </div>
        <el-col :span="50">
            <div style="padding: 6px">
            <el-card shadow="hover">
                <el-table :data="ordList.data" style="width: 100%;margin-bottom: 20px;" @selection-change="changeSelection">
                    <el-table-column type="selection">

                    </el-table-column>
                    <el-table-column prop="orderId" label="订单ID" sortable width="150">
                    </el-table-column>
                    <el-table-column prop="orderNumber" label="订单单号" sortable width="200">
                    </el-table-column>
                    <el-table-column prop="customername" label="客户名称" width="150" >
                    </el-table-column>
                    <el-table-column prop="saleName" label="销售名称" width="150">
                    </el-table-column>
                    <el-table-column prop="orderDate" label="订单日期"  width="150">
                    </el-table-column>
                    <el-table-column prop="deliveryDate" label="交货日期" width="150">
                    </el-table-column>

                    <el-table-column prop="salesReturn" label="退货状态" width="150">
                        <template slot-scope="scope">
                                <span>
                                    {{scope.row.state == 1 ? '退货' : '未退货'}}
                                </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="170">
                        <template slot-scope="{row}">
                            <el-button @click="openOrd(row)"
                                       size="small"
                                       type="primary" round
                                       icon="el-icon-search"
                            >查看 </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            </div>
        </el-col>

        <el-drawer
                title="订单详情"
                :visible.sync="drawer"
                :direction="direction"
                size="50%"
                :before-close="handleClose">
            <span>
            <el-form inline>
                    <el-form-item>
                        <el-button type="primary" @click="insertTo" >添加</el-button>
                    </el-form-item>
            </el-form>
                <el-table :data="proList.data" style="width: 100%;margin-bottom: 20px;" height="300px"
                          row-key="productId"
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                                    <el-table-column prop="ordcomId" label="产品ID" sortable >
                                    </el-table-column>
                                    <el-table-column prop="orderNumber" label="订单单号" sortable>
                                    </el-table-column>
                                    <el-table-column prop="productName" label="产品名称" >
                                    </el-table-column>
                                    <el-table-column prop="orderNum" label="数量" >
                                    </el-table-column>
                                    <el-table-column prop="orderPrice" label="单价" >
                                    </el-table-column>
                                    <el-table-column prop="orderCount" label="总价">
                                    </el-table-column>
                                    <el-table-column prop="common" label="备注"  >
                                    </el-table-column>
                                    <el-table-column prop="prounits" label="单位">
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="{row}">
                                            <el-button @click=""  size="small">修改 </el-button>
                                            <el-button type="danger" @click="del(row)"  size="small">删除 </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
            </span>
        </el-drawer>

    </template>
    <!--            添加-->
    <el-drawer title="添加销售订单" :visible.sync="dr" size="100%" :direction="righ" :model="ors">
        <el-form>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content">
                        <el-form-item label="订单单号">
                            <el-input v-model="ors.orderNumber" style="width: 74%"disabled> </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-form-item label="客户名称">
                            <el-input v-model="ors.customername" style="width: 74%"disabled> </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-form-item label="销售名称">
                            <el-input v-model="ors.saleName" style="width: 74%"disabled> </el-input>
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>
        </el-form>
        <h3>确认产品信息</h3>
        <el-table
                ref="multipleTable"
                :data="ductlist.data"
                tooltip-effect="dark"
                style="width: 100%" >
            <el-table-column label="选择" width="60">
                <template slot-scope="scope">
                    <el-checkbox
                            v-model="scope.row.editable"
                            @change="handleRowChange(scope.row)"
                    ></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column label="编号" width="120" prop="productId"> </el-table-column>
            <el-table-column prop="productName" label="产品名称"> </el-table-column>
            <el-table-column prop="catName" label="规格型号"> </el-table-column>
            <el-table-column prop="bomName" label="BOM级别"> </el-table-column>
            <el-table-column prop="proUnits" label="计量单位" width="120"> </el-table-column>
            <el-table-column prop="common" label="产品描述"> </el-table-column>
            <el-table-column label="产品数量">
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.orderNum" type="number"
                              placeholder="请输入数量"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="产品单价">
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.orderPrice"
                              type="number" placeholder="请输入单价" ></el-input>
                </template>
            </el-table-column>
            <el-table-column label="产品总价">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.orderCount" :disabled="true"></el-input>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px;margin-left: 10px">
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="grid-content"></div>
                </el-col>
                <el-col :span="8">
                    <div style="padding-left: 55px" class="grid-content">
                        <el-button @click="close">取 消</el-button>
                        <el-button type="primary" @click="orderinsert">确 定</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-drawer>
</div>


<script>
    new Vue({
        el: "#ord",
        data: {
            ordList: [], // 假设这是第一个表格的数据
            proList: [],
            ductlist:[],
            dateValue: new Date(), // 或者从某个地方获取的日期
            insertFlag:false,//新增
            checked: true,
            drawer: false,
            dr:false,
            direction: 'btt',
            righ: 'btt',
            number:'',
            options: [],
            value: [],
            dataD: '',
            ors: {
                ordcomId:'',
                orderNumber:'',
                productName:'',
                orderDate:'',
                orderNum:'',
                orderPrice:'',
                orderCount:'',
                common:'',
                prounits:'',
                saleName:'',
                customername:'',
            },
            vo: {
                orderDate: '',
                comeTime: '',
                orderNumber:'',
                saleName:''
            },
            orderSelection: []

        },

        // 时间
        timedate: {
            formattedDate() {
                // 使用 JavaScript 的 Date 对象和 padStart 方法来格式化日期
                const year = this.dateValue.getFullYear();
                const month = (this.dateValue.getMonth() + 1).toString().padStart(2, '0');
                const day = this.dateValue.getDate().toString().padStart(2, '0');
                const hours = String(this.dateValue.getHours()).padStart(2, '0'); // 获取小时数，并补零
                const minutes = String(this.dateValue.getMinutes()).padStart(2, '0'); // 获取分钟数，并补零
                const seconds = String(this.dateValue.getSeconds()).padStart(2, '0'); // 获取秒数，并补零
                return `${year}${month}${day}${hours}${minutes}${seconds}`; // 例如 "20230913"
            }
        },
        methods: {
            //显示
            search() {
                axios.get("/ord/ordsearch" ,{params: this.vo})
                    .then(({data}) => {
                        this.ordList = data;
                    })
                this.vo.orderDate = ''
                this.vo.comeTime = ''
                this.vo.orderNumber=''
                this.vo.saleName=''
            },
            exprort(){
                window.location.href="/ord/exportPdf";
            },
            xiansearch() {
                axios.get("/duct/search")
                    .then(({data}) => {
                        this.ductlist = data;
                    })
            },
            //查询日期
            dataTime(value) {
                if (value === null) {
                    // 可以选择设置默认值或者清除原有的值
                    this.vo.orderDate = null
                    this.vo.comeTime = null
                } else if (Array.isArray(value) && value.length >= 2) {
                    const [orderDate, comeTime] = value
                    this.vo.orderDate = orderDate
                    this.vo.comeTime = comeTime
                } else {
                    console.error("Invalid value format for dataTime:", value)
                }
            },
            prosearch() {
                axios.get("/ord/searchx?number="+this.number)
                    .then(({data}) => {
                        this.proList = data;
                    })
            },
            //添加
            insertTo() {
                this.dr = true;
                this.insertFlag = true;
                this.ors.orderNumber=this.ordnumbers;
                this.ors.saleName=this.saleName;
                this.ors.customername=this.customername;
                this.ductlist.data = this.ductlist.data.filter(item => {
                    // 如果在proList中找到相同产品名称的数据，则过滤掉
                    return !this.proList.data.some(proItem => proItem.productName === item.productName);
                });
            },
            orderinsert() {
                this.number=this.ors.orderNumber
                axios.post("/ord/add", this.ors)
                    .then(({data}) => {
                        console.log(data)
                        this.dr = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.prosearch();
                    })
                    .catch(error => {
                        console.error('Error adding order:', error);
                        // Handle error
                    });
            },
            handleRowChange(row) {
                // 检查当前行的可编辑状态（复选框的选中状态）
                if (row) {
                    // 如果被选中，添加到 this.orderSelection 中（如果不存在的话）
                    if (!this.orderSelection.includes(row)) {
                        this.orderSelection.push(row);
                    }
                    // 将选中行的 orderNum 值赋给 this.ors.orderNum
                    this.ors.orderNum = row.orderNum;
                    this.ors.orderPrice = row.orderPrice;
                    this.ors.orderCount = row.orderCount;
                    this.ors.commId= row.productId;
                } else {
                    // 如果被取消选中，从 this.orderSelection 中移除
                    const index = this.orderSelection.indexOf(row);
                    if (index !== -1) {
                        this.orderSelection.splice(index, 1);
                    }
                    // 如果取消选中，可以将 this.ors.orderNum 置空或者处理其他逻辑
                    this.ors.orderNum = null;
                }


                console.log("选中的行数据：", this.orderSelection);
            },

            //关闭
            close() {
                this.dr = false;
                location.reload()
            },
            //关闭
            handleClose(done) {
                done();
                location.reload()
            },

            openOrd(row){
                this.drawer = true;
                let opennumber = row.orderNumber;
                this.ordnumbers = opennumber;
                let opensaleNamer = row.saleName;
                this.saleName = opensaleNamer;
                let opencustomername = row.customername;
                this.customername = opencustomername;

                // 发送请求获取订单详情数据
                axios.get("/ord/searchx?number=" + opennumber)
                    .then(({data}) => {
                        // 判断订单详情数据条数
                        if (data.length === 0) {
                            // 如果订单详情数据为空，提示用户
                            this.$message.warning('该订单下无数据！');
                        } else {
                            // 如果订单详情数据不为空，将数据存储到this.proList中
                            this.proList = data;
                            this.ductlist.data = this.ductlist.data.filter(item => {
                                return !data.some(proItem => proItem.productName === item.productName);
                            });
                        }
                    })
            },
            del(row) {
                this.number=row.orderNumber;
                this.$confirm("确实要删除么？", "信息提示")
                    .then(() => {
                        axios.delete("/ord/del?ordcomId=" + row.ordcomId)
                            .then(({data}) => {
                                this.$message({
                                    message: data.msg,
                                    type: data.code == 200 ? 'success' : 'error'
                                });
                                this.prosearch();
                            });
                    })
            },
            //复选框
            changeSelection(arr) {
                console.log(arr)
                this.datalist = arr[0];
                this.chaseIds = arr.map(chase => chase.chaseId);
            },

        },
        watch: {
            'ductlist.data': {
                handler: function (newVal) {
                    // 遍历数据，为每个数据项添加一个额外字段用于存储总价
                    newVal.forEach(item => {
                        item.orderCount = item.orderNum * item.orderPrice;
                    });
                },
                deep: true
            },
            // 监听数量和单价的变化
            'ductlist.data': {
                handler: function (newVal, oldVal) {
                    newVal.forEach(item => {
                        // 确保数量和单价都已输入且为数字
                        let num = parseInt(item.orderNum);
                        let price = parseFloat(item.orderPrice);
                        if (!isNaN(num) && !isNaN(price)) {
                            // 计算总价并更新到当前行的orderCount字段
                            item.orderCount = num * price;
                        } else {
                            // 如果输入的不是数字，可以重置总价或进行其他处理
                            item.orderCount = '';
                        }
                    });
                },
                deep: true
            }
        },
        mounted() {
            this.search();
            this.xiansearch();
        }
    })
</script>

<style scoped>
    .scroll-container {
        height: 1000px; /* 设置容器高度 */
        overflow-y: auto; /* 启用垂直滚动 */
    }
    .scroll-content {
        /* ... */
    }
     .el-card__body{
         padding: 5px;
     }
     .gao{
         height: 50px;
     }
</style>
</body>
</html>